<template>
  <div class="container">
    <el-form :model="searchList" ref="searchList">
      <el-row :gutter="20">
        <el-col :span="5" :offset="0">
          <el-form-item label>
            <el-input v-model="searchList.project_name" placeholder="项目名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label>
            <el-date-picker
              v-model="searchList.create_time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="建成时间"
              :clearable="true"
              class="wid"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item label>
            <el-select
              v-model="searchList.project_model"
              value-key="project_model"
              placeholder="建设模式"
              clearable
            >
              <el-option
                v-for="item in d_buildType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe :height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="project_name" label="项目类型" width="80" align="center">
        <template slot-scope="{row}" v-if="row.copy_status">
          <el-tag type="success" size="medium" v-if="row.copy_status ==='0'">无变化</el-tag>
          <el-tag type="warning" size="medium" v-else-if="row.copy_status ==='1'">有变化</el-tag>
          <el-tag type="primary" size="medium" v-else>新增</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="project_name" label="项目名称" min-width="300" align="center"></el-table-column>
      <el-table-column prop="amount" label="总建设投资金额" width="100" align="center"></el-table-column>
      <el-table-column label="建设模式" width="100" align="center">
        <template slot-scope="{row}">{{row.project_model | f_buildType}}</template>
      </el-table-column>
      <el-table-column label="建成时间" width="100" align="center">
        <template slot-scope="{row}">{{$util.formatDate(row.create_time)}}</template>
      </el-table-column>
      <el-table-column prop="maintenance_amount" label="以往运维资金" width="100" align="center"></el-table-column>
      <el-table-column prop="service_pre_amount_sum" label="申请金额" width="100" align="center"></el-table-column>
      <el-table-column label="操作" width="350" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="projectInfo(row.id)">项目信息</el-button>
            <el-button type="primary" size="mini" @click="contractInfo(row)">合同信息</el-button>
            <el-button
              type="info"
              size="mini"
              @click="flow(row)"
            >{{row.status | f_submitTtypeRename}}</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 项目信息 -->
    <el-drawer
      title="项目信息"
      :visible.sync="projectShow"
      size="70%"
      center
      :destroy-on-close="true"
      :wrapperClosable="false"
    >
      <project-item
        :project-params="projectParams"
        :switch="this.switch"
        @cancel="cancel"
        @init="init"
      ></project-item>
    </el-drawer>
    <!-- 流程图 -->
    <el-dialog
      title="流程信息"
      :visible.sync="flowShow"
      width="70%"
      @close="flowShow = false"
      top="20px"
    >
      <flow-Item :flow-params="flowParams" ref="flowItems"></flow-Item>
      <span slot="footer">
        <el-button type="primary" @click="flowShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ProjectItem from '@/components/Project'
import FlowItem from '@/components/FlowChart'
import { d_buildType } from '@/utils/dicts.js'
import { f_buildType, f_submitTtypeRename } from '@/utils/filters.js'
export default {
  name: 'UnitFinish',
  components: {
    ProjectItem, FlowItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    status: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 280,
      searchList: {},
      loading: false,
      tableData: [],
      projectShow: false,
      projectParams: {},
      d_buildType: d_buildType,
      flowShow: false,
      flowParams: {}
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputProjectList', {
        del_flag: '0',
        menu_level: '2',
        ...this.searchList
      })
      this.tableData = res.filter(item => {
        return item.status > this.status
      })
      this.loading = false
    },
    search () {
      this.init()
    },
    cancel () {
      this.projectShow = false
      this.projectParams = {}
      this.contractShow = false
      this.contractParams = {}
    },
    projectInfo (pid) {
      this.projectShow = true
      this.projectParams = {
        pid: pid,
      }
    },
    contractInfo (item) {
      sessionStorage.setItem("inputInfo",
        JSON.stringify({
          switch: this.switch,
          pid: item.id,
          pcode: item.project_code,
          pname: item.project_name,
          path: 'finish'
        })
      );
      this.$router.push({
        path: './unit/contract',
      })
    },
    flow (item) {
      this.flowShow = true
      this.flowParams = {
        pid: item.id,
        status: item.status,
        apply_batch: item.apply_batch,
        inside_log: item.internal_code_log
      }
      setTimeout(() => {
        setTimeout(() => {
          console.log('执行1');
          this.$refs.flowItems.init()

        }, 100)
        console.log('执行2');
        this.$refs.flowItems.close()

      }, 100)
    }
  },
  computed: {

  },
  filters: {
    f_buildType: f_buildType,
    f_submitTtypeRename: f_submitTtypeRename
  }
}
</script>
<style scoped>
</style>
